<template>
  <Error>
    <fieldset>
      <legend>App组件</legend>
      <!-- <customDirective/> -->
      <!-- <setup :num="num">
        <h1>一个插槽</h1>
    </setup> -->
      <!-- <refCom></refCom> -->
      <!-- <reactiveCom></reactiveCom>
    <methodsCom></methodsCom> -->
      <!-- <defineApi></defineApi> -->
      <!-- <computedCom></computedCom> -->
      <!-- <todolist></todolist> -->
      <!-- <watchCom :testVal="testVal" :testVal2="testVal2"></watchCom> -->
      <!-- <watchEffctVue></watchEffctVue> -->
      <watchEffectExam></watchEffectExam>
    </fieldset>
  </Error>
</template>
<script setup>
// import customDirective from "./components/CustomDirective.vue"
// import setup from "./components/setup.vue"
// import refCom from "./components/ref.vue"
// import reactiveCom from "./components/reactive.vue"
// import methodsCom from "./components/methods.vue"
// import defineApi from "./components/defineApi/index.vue"
// import computedCom from "./components/computed.vue"
// import todolist from "./components/todolist/index.vue"
import watchEffctVue from "./components/watchEffct.vue";
import Error from "./components/Error.vue"
import watchCom from "./components/watchCom.vue"
import watchEffectExam from "./components/watchEffect失效函数的应用.vue";
import { ref } from "vue"
let testVal = ref('德国')
let testVal2 = ref('日本')
</script>